<template>
  <div class="card">
    <div>
      <a-input class="inputStyle" placeholder="请输入姓名"></a-input>
      <a-input class="inputStyle" placeholder="请输入手机号"></a-input>
      <a-select class="inputStyle" placeholder="状态">
        <a-select-option v-for="item in payType" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-button style="margin-right: 10px" type="primary">查询</a-button>
      <a-button>重置</a-button>
    </div>
    <a-table
      bordered
      :rowKey="(record, index) => index"
      :pagination="false"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      :data-source="tableData"
      :columns="columns"
    >
    </a-table>
  </div>
</template>

<script>
import { payTypeAPI } from '@/api/product.js'
export default {
  name: 'debtGiftPackageOrder',
  data() {
    return {
      payType: [],
      columns: [
        {
          title: '购买人',
          align: 'center'
        },
        {
          title: '购买人手机号',
          align: 'center'
        },
        {
          title: '客户',
          align: 'center'
        },
        {
          title: '客户经理',
          align: 'center'
        },
        {
          title: '时间',
          align: 'center'
        },
        {
          title: '订单号',
          align: 'center'
        },
        {
          title: '实付款',
          align: 'center'
        },
        {
          title: '状态',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center'
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getType()
  },
  methods: {
    async getType() {
      const { data } = await payTypeAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      console.log(data)
      this.payType = data
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  margin-right: 10px;
  width: 200px;
}
</style>
